<template>
  <div>
    <h1>事件</h1>
    <!-- 原生DOM事件 -->
    <pre @click="handler">
      大江东去浪淘尽，千古分流人物
    </pre>
    <button @click="handler1(1, 2, 3, $event)">点击我传递多个参数</button>
    <hr>
    <event-1 @click="handler2"></event-1>
    <hr>
    <!-- 绑定自定义事件xxx:实现组件给父组件传递数据 -->
    <event-2 @xxx="handler3" @click="handler4"></event-2>
  </div>
</template>

<script setup lang="ts">
import event1 from './event1.vue';
import event2 from './event2.vue'
// 事件回调1
const handler = (event) => {
  console.log(event);
};
// 事件回调2
const handler1 = (a, b, c, $event) => {
  console.log(a,b,c,$event);
};
// 事件回调3
const handler2 = () => {
  console.log(123);
}
// 事件回调4
const handler3 = (param1, param2) => {
  console.log(param1, param2);
}
// 事件回调5
const handler4 = (param1, param2) => {
  console.log(param1, param2);
  
}
</script>
<style scoped lang="less">
</style>